<template>
  <div class="dashboard-container">
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card class="stat-card">
          <template #title>
            <div class="card-title">
              <icon-user class="icon" />
              <span>用户总数</span>
            </div>
          </template>
          <div class="stat-value">{{ stats.userCount }}</div>
          <div class="stat-footer">较上月增长 {{ stats.userGrowth }}%</div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="stat-card">
          <template #title>
            <div class="card-title">
              <icon-calendar class="icon" />
              <span>今日活跃</span>
            </div>
          </template>
          <div class="stat-value">{{ stats.activeUsers }}</div>
          <div class="stat-footer">较昨日增长 {{ stats.activeGrowth }}%</div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="stat-card">
          <template #title>
            <div class="card-title">
              <icon-file class="icon" />
              <span>系统日志</span>
            </div>
          </template>
          <div class="stat-value">{{ stats.logCount }}</div>
          <div class="stat-footer">今日新增 {{ stats.newLogs }} 条</div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="stat-card">
          <template #title>
            <div class="card-title">
              <icon-check-circle class="icon" />
              <span>系统状态</span>
            </div>
          </template>
          <div class="stat-value">{{ stats.systemStatus }}</div>
          <div class="stat-footer">运行时间 {{ stats.uptime }}</div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" style="margin-top: 16px">
      <a-col :span="16">
        <a-card title="访问统计">
          <template #extra>
            <a-radio-group type="button" v-model="chartPeriod">
              <a-radio value="day">今日</a-radio>
              <a-radio value="week">本周</a-radio>
              <a-radio value="month">本月</a-radio>
            </a-radio-group>
          </template>
          <!-- 这里可以添加图表组件 -->
          <div style="height: 300px; display: flex; justify-content: center; align-items: center;">
            访问统计图表将在这里显示
          </div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="最近活动">
          <a-list>
            <a-list-item v-for="(activity, index) in recentActivities" :key="index">
              <a-list-item-meta>
                <template #avatar>
                  <a-avatar :style="{ backgroundColor: activity.color }">
                    {{ activity.user.charAt(0) }}
                  </a-avatar>
                </template>
                <template #title>{{ activity.user }}</template>
                <template #description>{{ activity.action }}</template>
              </a-list-item-meta>
              <template #extra>{{ activity.time }}</template>
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { 
  IconUser, 
  IconCalendar, 
  IconFile, 
  IconCheckCircle 
} from '@arco-design/web-vue/es/icon'

// 模拟数据
const stats = ref({
  userCount: 1234,
  userGrowth: 5.2,
  activeUsers: 328,
  activeGrowth: 12.5,
  logCount: 8562,
  newLogs: 126,
  systemStatus: '正常',
  uptime: '23天12小时'
})

const chartPeriod = ref('week')

const recentActivities = ref([
  {
    user: '管理员',
    action: '更新了系统配置',
    time: '10分钟前',
    color: '#165DFF'
  },
  {
    user: '张三',
    action: '新建了用户账号',
    time: '30分钟前',
    color: '#14C9C9'
  },
  {
    user: '李四',
    action: '修改了个人信息',
    time: '1小时前',
    color: '#FF7D00'
  },
  {
    user: '王五',
    action: '导出了系统日志',
    time: '2小时前',
    color: '#722ED1'
  }
])
</script>

<style scoped>
.dashboard-container {
  padding: 16px;
}

.stat-card {
  background-color: var(--color-bg-2);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon {
  font-size: 20px;
  color: rgb(var(--primary-6));
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin: 16px 0;
  color: var(--color-text-1);
}

.stat-footer {
  color: var(--color-text-3);
  font-size: 14px;
}
</style>